<template>
  <div class="footer" v-if="isPC">
    <!-- <div class="rowbox">
      <div class="rowle">
        <div class="rowone">
          <img src="@/assets/svg/f-1.svg" alt="" />
        </div>
        <div class="rowone">
          <img src="@/assets/svg/f-2.svg" alt="" />
        </div>
        <div class="rowone mb0">
          <img src="@/assets/svg/f-3.svg" alt="" />
        </div>
      </div>
      <div class="rowr">
        <div class="cartone">
          <div class="cart"><span>Home</span></div>
          <div class="cartdes"><span>Why Us</span></div>
          <div class="cartdes"><span>About Us</span></div>
          <div class="cartdes"><span>Careers</span></div>
          <div class="cartdes"><span>FAQ’s</span></div>
        </div>
        <div class="cartone">
          <div class="cart"><span>Services</span></div>
          <div class="cartdes"><span>Upnetwork App</span></div>
          <div class="cartdes"><span>Merchant Platform</span></div>
          <div class="cartdes"><span>UP Network Explorer</span></div>
          <div class="cartdes"><span>Payment Network</span></div>
        </div>
        <div class="cartone">
          <div class="cart"><span>Docs</span></div>
          <div class="cartdes"><span>Project Information</span></div>
          <div class="cartdes"><span>Developer Documentation</span></div>
        </div>
        <div class="cartone">
          <div class="cart"><span>News</span></div>
          <div class="cartdes"><span>First News</span></div>
          <div class="cartdes"><span>Second News</span></div>
          <div class="cartdes"><span>Third News</span></div>
        </div>
      </div>
    </div> -->
    <div>
      <img class="logo" src="@/assets/svg/OntaNetworkSVG.svg" alt="" />
    </div>
    <div class="webdrossBox" style="background-color: #000">
      <span>© 2025 Onta Network. All rights reserved.</span>
      <!-- <div class="webdrossBoxr">
        <span>Terms & Conditions </span>
        <b></b>
        <span>Privacy Policy</span>
      </div> -->
      <div class="webdrossBoxr">
        <a href="mailto:hi@upnetwork.one">Contact Us</a>
      </div>
    </div>
  </div>
  <div class="p_footer" v-else>
    <img class="logo" src="@/assets/svg/OntaNetworkSVG.svg" alt="" />
    <!-- <div class="rowle">
      <div class="rowone">
        <img src="@/assets/svg/f-1.svg" alt="" />
      </div>
      <div class="rowone">
        <img src="@/assets/svg/f-2.svg" alt="" />
      </div>
      <div class="rowone mb0">
        <img src="@/assets/svg/f-3.svg" alt="" />
      </div>
    </div> -->
    <!-- <div class="rowr">
      <div class="cartone">
        <div class="cart"><span>Home</span></div>
        <div class="cartdes"><span>Why Us</span></div>
        <div class="cartdes"><span>About Us</span></div>
        <div class="cartdes"><span>Careers</span></div>
        <div class="cartdes"><span>FAQ’s</span></div>
      </div>
      <div class="cartone">
        <div class="cart"><span>News</span></div>
        <div class="cartdes"><span>First News</span></div>
        <div class="cartdes"><span>Second News</span></div>
        <div class="cartdes"><span>Third News</span></div>
      </div>
      <div class="cartone">
        <div class="cart"><span>Services</span></div>
        <div class="cartdes"><span>Upnetwork App</span></div>
        <div class="cartdes"><span>Merchant Platform</span></div>
        <div class="cartdes"><span>UP Network Explorer</span></div>
        <div class="cartdes"><span>Payment Network</span></div>
      </div>
      <div class="cartone">
        <div class="cart"><span>Docs</span></div>
        <div class="cartdes"><span>Project Information</span></div>
        <div class="cartdes"><span>Developer Documentation</span></div>
      </div>
    </div> -->
    <div class="webdrossBox">
      <span>© 2025 Onta Network. All rights reserved.</span>
      <!-- <div class="webdrossBoxr">
        <span>Terms & Conditions </span>
        <b></b>
        <span>Privacy Policy</span>
      </div> -->
      <div class="webdrossBoxr">
        <a href="mailto:hi@upnetwork.one">Contact Us</a>
      </div>
    </div>
  </div>
</template>

<script>
import { useConfig } from '@/stores/config.js'

export default {
  name: 'Footer',
  data() {
    return {}
  },
  computed: {
    isPC() {
      return useConfig().isPc
    }
  },
  beforeMount: function () {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  box-sizing: border-box;
  padding: 107px 56px;
  background-color: #000;
  .logo {
    height: 45px;
    padding-left: 40px;
  }
  .rowbox {
    display: flex;
    align-items: center;
    .rowle {
      width: 376px;
      height: 341px;
      box-sizing: border-box;
      padding: 40px 2.16px 17.94px 40px;
      border-radius: 14px;
      background-color: #080808;
      margin-right: 16px;
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      .rowone {
        width: 129.84px;
        height: 124.03px;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 16px;
        background-color: #1f1f1f;
        border: 1px solid #333;
        margin-right: 25px;
        margin-bottom: 31.16px;
        img {
          height: 34px;
        }
        &:nth-child(2) {
          img {
            height: 32px;
          }
        }
      }
      .mb0 {
        margin-bottom: 0px;
      }
    }
    .rowr {
      height: 341px;
      flex: 1;
      padding: 60px;
      box-sizing: border-box;
      background-color: #080808;
      display: flex;
      .cartone {
        flex: 1;
        margin-right: 60px;
        .cart {
          font-family: DM Sans;
          font-weight: 700;
          font-size: 22px;
          line-height: 100%;
          letter-spacing: 0%;
          margin-bottom: 30px;
          color: #badaff;
          span {
            cursor: pointer;
          }
        }
        .cartdes {
          font-family: DM Sans;
          font-weight: 400;
          font-size: 18px;
          line-height: 150%;
          letter-spacing: 0%;
          color: #81807e;
          margin-bottom: 18px;
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
  .webdrossBox {
    width: 100%;
    height: 127px;
    background-color: #080808;
    margin-top: 20px;
    border-radius: 16px;
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .webdrossBoxr {
      display: flex;
      align-items: center;
    }
    b {
      width: 1px;
      height: 27px;
      background-color: #232329;
      margin: 0px 11px;
    }
    span,
    a {
      cursor: pointer;
      font-family: DM Sans;
      font-weight: 400;
      font-size: 18px;
      line-height: 18px;
      letter-spacing: 0%;
      color: #b3b3b2;
    }
  }
}

@media screen and (max-width: 768px) {
  .p_footer {
    width: 100%;
    box-sizing: border-box;
    padding: 65px 0px 58px 34px;
    background-color: #000;
    .logo {
      margin-bottom: 125px;
      height: 30px;
    }
    .rowle {
      display: flex;
      width: 100%;
      margin-bottom: 100.53px;
      .rowone {
        width: 65.52px;
        height: 63.47px;
        box-sizing: border-box;
        padding: 8.19px;
        border-radius: 6.14px;
        border: 1px solid #333;
        margin-right: 12.76px;
        background-color: #1f1f1f;
        img {
          height: 17.4px;
        }
        &:nth-child(2) {
          img {
            height: 16.38px;
          }
        }
      }
    }
    .rowr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      .cartone {
        margin-bottom: 45px;
        flex: 1;
        .cart {
          font-family: DM Sans;
          font-weight: 700;
          font-size: 22px;
          line-height: 100%;
          letter-spacing: 0%;
          color: #badaff;
          margin-bottom: 30px;
        }
        .cartdes {
          font-family: DM Sans;
          font-weight: 400;
          font-size: 17px;
          line-height: 150%;
          letter-spacing: 0%;
          color: #81807e;
          margin-bottom: 4px;
          &:last-child {
            margin-bottom: 0px;
          }
        }
      }
    }
    .webdrossBox {
      margin-top: 23px;
      span {
        font-family: DM Sans;
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        letter-spacing: 0%;
        // color: #b3b3b2;
        color: #fff;
      }
      .webdrossBoxr {
        display: flex;
        align-items: center;
        margin-top: 11px;
        a {
          color: #fff;
        }
        b {
          width: 1px;
          height: 27px;
          background-color: #232329;
          margin: 0px 11px;
        }
      }
    }
  }
}
</style>
